<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <el-input v-model="queryParams.name" placeholder="搜索酒店名称" class="search-input" clearable
        @keyup.enter.native="handleQuery">
        <el-button slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
      </el-input>
      <el-select v-model="queryParams.province" placeholder="选择城市" clearable @change="handleQuery">
        <el-option v-for="item in addressList" :key="item" :label="item" :value="item">
        </el-option>
      </el-select>
    </div>

    <!-- 酒店列表 -->
    <div class="hotel-list">
      <el-row :gutter="20">
        <el-col :span="6" v-for="hotel in hotelList" :key="hotel.hotelId">
          <el-card class="hotel-card" :body-style="{ padding: '0px' }" shadow="hover">
            <img :src="hotel.image || require('@/assets/logo.png')" class="hotel-image">
            <div class="hotel-info">
              <h3 class="hotel-name">{{ hotel.name }}</h3>
              <div class="hotel-location">
                <i class="el-icon-location"></i>
                <span>{{ hotel.city }} {{ hotel.address }}</span>
              </div>
              <div class="hotel-phone">
                <i class="el-icon-phone"></i>
                <span>{{ hotel.phone }}</span>
              </div>
              <div class="hotel-phone">
                <i class="el-icon-time"></i>
                <span>{{ hotel.inTime }} ~ {{ hotel.outTime }}</span>
              </div>
              <div class="hotel-features" v-if="hotel.features && hotel.features.length">
                <i class="el-icon-star-on"></i>
                <span class="features-tags">
                  <el-tag
                    v-for="featureId in hotel.features"
                    :key="featureId"
                    size="small"
                    type="success"
                    class="feature-tag"
                  >
                    {{ getFeatureName(featureId) }}
                  </el-tag>
                </span>
              </div>
              <div class="hotel-actions">
                <el-button type="primary" size="small" @click="handleDetail(hotel)">立即预订</el-button>
                <el-button type="text" @click="handleDetail(hotel)">查看详情</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum" :page-sizes="[12, 24, 36, 48]" :page-size="queryParams.pageSize"
        layout="total, prev, pager, next" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getHotelList, getFeaturesList } from "@/api/index.js";

export default {
  name: "Hotel",
  data() {
    return {
      // 加载状态
      loading: false,
      // 总条数
      total: 0,
      // 酒店列表数据
      hotelList: [],
      // 特色列表数据
      featuresList: [],
      // 城市选项
      cityOptions: [
        { value: '北京', label: '北京' },
        { value: '上海', label: '上海' },
        { value: '广州', label: '广州' },
        { value: '深圳', label: '深圳' },
        { value: '杭州', label: '杭州' }
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        province: null
      },
      addressList: [
        // 直辖市
        "北京", "上海", "天津", "重庆",
        // 广东省
        "广州", "深圳", "东莞", "佛山", "珠海", "中山", "惠州", "汕头", "江门", "湛江", "肇庆", "茂名",
        // 江苏省
        "南京", "苏州", "无锡", "常州", "南通", "徐州", "扬州", "盐城", "泰州", "镇江", "淮安", "连云港", "宿迁",
        // 浙江省
        "杭州", "宁波", "温州", "绍兴", "嘉兴", "金华", "台州", "湖州", "衢州", "丽水", "舟山",
        // 四川省
        "成都", "绵阳", "宜宾", "南充", "德阳", "泸州", "达州", "乐山", "眉山", "内江", "自贡", "攀枝花",
        // 湖北省
        "武汉", "宜昌", "襄阳", "荆州", "黄冈", "孝感", "十堰", "荆门", "鄂州", "咸宁", "随州",
        // 山东省
        "济南", "青岛", "烟台", "潍坊", "临沂", "淄博", "济宁", "泰安", "威海", "德州", "聊城", "菏泽", "日照", "枣庄",
        // 福建省
        "福州", "厦门", "泉州", "漳州", "莆田", "宁德", "三明", "南平", "龙岩",
        // 河南省
        "郑州", "洛阳", "南阳", "许昌", "周口", "新乡", "商丘", "驻马店", "信阳", "安阳", "开封", "平顶山",
        // 湖南省
        "长沙", "株洲", "湘潭", "衡阳", "岳阳", "常德", "邵阳", "郴州", "益阳", "永州", "怀化", "娄底", "张家界",
        // 其他省份重点城市
        // 河北省
        "石家庄", "保定", "唐山", "邯郸", "廊坊", "沧州", "邢台", "秦皇岛", "衡水", "张家口",
        // 陕西省
        "西安", "咸阳", "宝鸡", "渭南", "汉中", "榆林", "延安", "安康", "商洛",
        // 辽宁省
        "沈阳", "大连", "鞍山", "抚顺", "锦州", "营口", "盘锦", "丹东", "辽阳", "本溪",
        // 其他地区
        "合肥（安徽）", "芜湖（安徽）", "南昌（江西）", "赣州（江西）",
        "太原（山西）", "大同（山西）", "呼和浩特（内蒙古）", "包头（内蒙古）",
        "南宁（广西）", "柳州（广西）", "桂林（广西）", "海口（海南）", "三亚（海南）",
        "贵阳（贵州）", "遵义（贵州）", "昆明（云南）", "曲靖（云南）",
        "兰州（甘肃）", "天水（甘肃）", "银川（宁夏）", "西宁（青海）",
        "乌鲁木齐（新疆）", "克拉玛依（新疆）", "拉萨（西藏）",
        // 港澳台
        "香港", "澳门", "台北（台湾）", "高雄（台湾）", "台中（台湾）", "新北（台湾）"
      ]
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询酒店列表 */
    getList() {
      this.loading = true;
      getFeaturesList({
        pageSize: 100
      }).then(response => {
        this.featuresList = response.rows;
        getHotelList(this.queryParams).then(response => {
          this.hotelList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      });
    },
    /** 获取特色名称 */
    getFeatureName(featureId) {
      const feature = this.featuresList.find(item => item.featuresId === featureId);
      return feature ? feature.name : '';
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 分页大小改变 */
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    /** 当前页改变 */
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
    /** 预订酒店 */
    handleBook(hotel) {
      this.$router.push({
        path: '/hotel/book',
        query: { hotelId: hotel.hotelId }
      });
    },
    /** 查看详情 */
    handleDetail(hotel) {
      this.$router.push({
        path: '/hotel/details',
        query: { hotelId: hotel.hotelId }
      });
    }
  }
};
</script>

<style scoped>
.app-container {
  padding: 30px;
  background: linear-gradient(135deg, #f6f8fc 0%, #f0f4f8 100%);
  min-height: calc(100vh - 84px);
}

.search-container {
  margin-bottom: 40px;
  display: flex;
  gap: 20px;
  background: rgba(255, 255, 255, 0.95);
  padding: 25px;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(10px);
}

.search-input {
  width: 300px;
}

.search-input :deep(.el-input__inner) {
  border-radius: 12px;
  height: 45px;
  border: 2px solid #eef2f7;
  background: #f8fafc;
  transition: all 0.3s ease;
}

.search-input :deep(.el-input__inner:focus) {
  border-color: #409EFF;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(64, 158, 255, 0.1);
}

.search-input :deep(.el-input-group__append) {
  border-radius: 0 12px 12px 0;
  background: linear-gradient(135deg, #409EFF 0%, #36a3ff 100%);
  border: none;
  color: #fff;
  padding: 0 20px;
  height: 45px;
  transition: all 0.3s ease;
}

.search-input :deep(.el-input-group__append:hover) {
  background: linear-gradient(135deg, #36a3ff 0%, #409EFF 100%);
  transform: translateY(-1px);
}

.hotel-list {
  margin-bottom: 40px;
}

.hotel-card {
  margin-bottom: 25px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  height: 550px;
  border-radius: 16px;
  overflow: hidden;
  border: none;
  background: #fff;
}


.hotel-image {
  width: 100%;
  height: 240px;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hotel-card:hover .hotel-image {
  transform: scale(1.08);
}

.hotel-info {
  padding: 25px;
  position: relative;
}

.hotel-name {
  margin: 0 0 15px 0;
  font-size: 20px;
  color: #2c3e50;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.5px;
}

.hotel-location,
.hotel-phone {
  margin-bottom: 12px;
  font-size: 14px;
  color: #5a6a7f;
  display: flex;
  align-items: center;
}

.hotel-location i,
.hotel-phone i {
  margin-right: 10px;
  color: #409EFF;
  font-size: 16px;
}

.hotel-features {
  margin: 20px 0;
  font-size: 14px;
  color: #5a6a7f;
  display: flex;
  align-items: flex-start;
}

.hotel-features i {
  margin-right: 10px;
  color: #409EFF;
  margin-top: 3px;
  font-size: 16px;
}

.features-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.feature-tag {
  border-radius: 20px;
  padding: 0 15px;
  height: 28px;
  line-height: 28px;
  background: linear-gradient(135deg, #ecf5ff 0%, #e6f1ff 100%);
  color: #409EFF;
  border: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.feature-tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
}

.hotel-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid #edf2f7;
}

.hotel-actions .el-button--primary {
  border-radius: 12px;
  padding: 12px 25px;
  font-weight: 600;
  font-size: 15px;
  background: linear-gradient(135deg, #409EFF 0%, #36a3ff 100%);
  border: none;
  transition: all 0.3s ease;
}

.hotel-actions .el-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(64, 158, 255, 0.3);
}

.hotel-actions .el-button--text {
  color: #409EFF;
  font-weight: 500;
  font-size: 15px;
  transition: all 0.3s ease;
}

.hotel-actions .el-button--text:hover {
  color: #36a3ff;
  transform: translateY(-1px);
}

.pagination-container {
  text-align: center;
  margin-top: 40px;
  padding: 25px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(10px);
}

:deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
  background: linear-gradient(135deg, #409EFF 0%, #36a3ff 100%);
  font-weight: 600;
}

:deep(.el-pagination.is-background .el-pager li:not(.disabled):hover) {
  color: #409EFF;
}

:deep(.el-select .el-input__inner) {
  border-radius: 12px;
  height: 45px;
  border: 2px solid #eef2f7;
  background: #f8fafc;
}

:deep(.el-select .el-input__inner:focus) {
  border-color: #409EFF;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(64, 158, 255, 0.1);
}

:deep(.el-select-dropdown__item.selected) {
  color: #409EFF;
  font-weight: 600;
}
</style>